import React, { forwardRef ,useState,useEffect} from 'react'
import {Form, Input,Select} from 'antd'
const { Option } = Select;
//forwardRef是React中的一个特殊方法，包裹函数式组件
//会有两形参,props和ref,这个ref可以是父亲的ref
//作用:当绑定好后,父组件可以得到子组件的dom元素
 const  UserForm=forwardRef((props,ref)=>{
   const [isDisable,setIsDisable]=useState(false)
   const {roleId,region}=JSON.parse(localStorage.getItem("token"))
    const roleObj = {
      1: "superadmin",
      2: "admin",
      3: "editor",
    };
  //验证区域编辑权限
   const checkRegionDisable=(item)=>{
     //有此字段说明在更新,没有则说明是添加
     if(props.isUpdate){
       if(roleObj[roleId]==="superadmin"){
         return false
       }else{
         return true
       }
     }else{
       if(roleObj[roleId]==="superadmin"){
         return false
       }else{
         return item.value!==region
       }
     }
   }
   //验证角色编辑权限
   const checkRoleDisable=(item)=>{
     //有此字段说明在更新,没有则说明是添加
     if(props.isUpdate){
       if(roleObj[roleId]==="superadmin"){
         return false
       }else{
         return true
       }
     }else{
       if(roleObj[roleId]==="superadmin"){
         return false
       }else{
         return roleObj[item.id]!=="editor"
       }
     }
   }
  //验证角色编辑权限
  useEffect(() => {
     setIsDisable(props.isUpdateDisable)
  }, [props.isUpdateDisable])
  return (
    <Form layout="vertical" ref={ref}>
          <Form.Item
            name="username"
            label="用户名"
            rules={[
              {
                required: true,
                message: "Please input the title of collection!",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="password"
            label="密码"
            rules={[
              {
                required: true,
                message: "Please input the title of collection!",
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="region"
            label="区域"
            rules={isDisable?[]:[
              {
                required: true,
                message: "Please input the title of collection!",
              },
            ]}
          >
            <Select disabled={isDisable}>
              {
              props.regionList.map((item) => {
                return (
                  <Option value={item.value} key={item.id} disabled={checkRegionDisable(item)}>
                    {item.title}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
          <Form.Item
            name="roleId"
            label="角色"
            rules={[
              {
                required: true,
                message: "Please input the title of collection!",
              },
            ]}
          >
            <Select onChange={(value)=>{
              value===1&&setIsDisable(true)&&ref.current.setFieldsValue({
                region:""
              })
              value!==1&&setIsDisable(false)
            }}>
              {
              props.roleList.map((item) => {
                return (
                  <Option value={item.id} key={item.id} disabled={checkRoleDisable(item)}>
                    {item.roleName}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
    </Form>
  )
}
)


export default UserForm